<style>
    #warehouseConfiguration {
        width: 100%;
        min-width: 890px;
        position: relative;
    }

    #warehouseConfiguration .demo-table-expand {
        font-size: 0;
    }

    #warehouseConfiguration .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    #warehouseConfiguration .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 80%;
    }

    #warehouseConfiguration .el-table__expand-column .el-table__expand-icon {
        height: 39px;
    }

    #warehouseConfiguration .table {
        transition: 1s all;
    }

    #warehouseConfiguration .el-carousel__container {
        height: 440px;
    }

    .el-tooltip__popper {
        max-width: 400px;
    }

    .el-step__main {
        max-width: calc(100% - 60px);
    }

    #warehouseConfiguration .warehouseConfigurationTable {
        width: 95% !important;
        margin: 10px 20px 0;
    }

    #warehouseConfiguration .datePicker {
        width: 140px !important;
        height: 24px !important;
        margin-top: 29px;
        margin-right: 18px;
        float: left;
    }

    #warehouseConfiguration .datePicker .el-input__inner {
        border-radius: 2px !important;
        height: 24px !important;
    }

    #warehouseConfiguration .add {
        background: url("/static/images/add.png") no-repeat center;
    }

    #warehouseConfiguration .del {
        background: url("/static/images/del.png") no-repeat center;
    }

    #warehouseConfiguration .search {
        background: url("/static/images/search.png") no-repeat center;
    }

    #warehouseConfiguration .sel {
        background: url("/static/images/sel.png") no-repeat center;
    }

    #warehouseConfiguration .icon {
        float: left;
    }

    #warehouseConfiguration .btn span {
        float: left;
        margin-top: 4px;
        margin-left: 2px;
    }

    #warehouseConfiguration .btn {
        height: 24px;
        line-height: 1;
        border: none;
        background: #f8fafb;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        float: left;
        font-size: 14px;
        color: #1f2d3d;
        margin-top: 29px;
        margin-right: 16px;
    }

    #warehouseConfiguration .btn-print {
        margin-right: 0;
    }

    #warehouseConfiguration .btn:hover {
        color: #5468ee;
    }

    #warehouseConfiguration .inner {
        margin: 0 20px;
    }

    #warehouseConfiguration .btn-nav {
        height: 60px;
        overflow: hidden;
    }

    #warehouseConfiguration .btn-nav .el-input .el-input__inner {
        height: 24px;
    }

    #warehouseConfiguration .btn-nav .el-input {
        float: left;
        margin-top: 29px;
        margin-right: 18px;
        width: 140px;
        height: 24px;
    }

    #warehouseConfiguration h4 {
        padding-left: 20px;
        margin-bottom: 0px;
    }

    #warehouseConfiguration .formBottom {
        margin-top: 10px;
    }

    #warehouseConfiguration .warehouseConfigurationCombinationDetails .el-date-editor.el-input {
        width: 100%;
    }

    #warehouseConfiguration .warehouseConfigurationCombinationDetails {
        margin-top: 30px;
    }
</style>
<style>
    .steps {
        position: absolute;
        bottom: 10px;
        left: 30px;
        margin: auto;
    }

    .el-dialog__headerbtn {
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .el-step__main {
        margin-left: -8px !important;
    }
</style>
<style>
    .el-date-editor.el-input {
        width: 100%;
    }

    #warehouseConfiguration .warehouseDialog {
        background: #F8FAFB;
    }
</style>
<div id="warehouseConfiguration">
    <!--页面调整-->
    <el-row
            v-loading="showLoading"
            element-loading-text="拼命加载中">
        <div class="inner btn-nav">

            <el-input
                    v-model="baName"
                    icon="search"
                    placeholder="仓库名称"></el-input>
            <el-input
                    v-model="baScontacts"
                    icon="search"
                    placeholder="仓库负责人"></el-input>

                <el-select v-model="baCtype" placeholder="请选择">
                    <el-option :value="-1" label="全部"></el-option>
                    <el-option :value="0" label="平面仓"></el-option>
                    <el-option :value="1" label="立体仓"></el-option>
                </el-select>
            </el-form-item>
            <button @click="newInput" class="btn btn-add"><i
                    class="icon add"></i><span>新增</span>
            </button>

            <button @click="multiSelectClick" class="btn btn-multiSelect"><i
                    class="icon sel"></i><span>多选</span>
            </button>
            <button
                    class="btn"
                    v-show="multiSelect&&multipleSelection.length==1"
                    @click="multiOperationEdit">仓库配置
            </button>

            <button
                    class="btn"
                    v-show="multiSelect&&multipleSelection.length==1"
                    @click="multiOperationEdit">编辑
            </button>
        </div>
        <el-table
                :data="warehouseConfiguration"
                :max-height="config_table_height()"
                ref="table"
                class="warehouseConfigurationTable"
                @selection-change="multiSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="expand">
                <template scope="props">
                    <el-row>
                        <el-col :span="10">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="仓库名称">
                                    <span>{{ props.row.baName        }}</span>
                                </el-form-item>
                                <el-form-item label="仓库地址">
                                    <span>{{ props.row.baAddr         }}</span>
                                </el-form-item>
                                <el-form-item label="所在地市">
                                    <span>{{ props.row.baScity            }}</span>
                                </el-form-item>
                                <el-form-item label="负责人">
                                    <span>{{ props.row.baScontacts           }}</span>
                                </el-form-item>
                                <el-form-item label="电话">
                                    <span>{{ props.row.baPhone        }}</span>
                                </el-form-item>
                                <el-form-item label="面积">
                                    <span>{{ props.row.baAcreage           }}</span>
                                </el-form-item>
                                <el-form-item label="仓库类型">
                                    <span>{{ auto_baCtype(props.row.baCtype) }}</span>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-tooltip class="item" effect="dark"
                                                :content="props.row.Remarks"
                                                placement="top">
                                        <span class="remark">{{ props.row.Remarks }}</span>
                                    </el-tooltip>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="14">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="相对湿度">
                                    <span>{{ props.row.baHumidity     }}</span>
                                </el-form-item>
                                <el-form-item label="传真">
                                    <span>{{ props.row.baFax  }}</span>
                                </el-form-item>
                                <el-form-item label="邮编">
                                    <span>{{ props.row.baPostoffice        }}</span>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <span>{{ props.row.baStatus    }}</span>
                                </el-form-item>
                                <el-form-item label="客户id">
                                    <span>{{ props.row.baClientId     }}</span>
                                </el-form-item>
                                <el-form-item label="维护ti值">
                                    <span>{{ props.row.baIsti  == 2 ? '否':'是'      }}</span>
                                </el-form-item>
                                <el-form-item label="可用操作">
                                    <el-button
                                            size="small"
                                            icon="edit"
                                            @click="inlineEdit(props.$index, props.row)">
                                    </el-button>
                                    <el-button
                                            size="small"
                                            type="primary"
                                            @click="inlineRole(props.$index, props.row)">仓库配置
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column
                    label="客户id"
                    show-overflow-tooltip
                    align="center">
                <template scope="scope">
                    <span>{{ scope.row.baClientId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="仓库名称"
                    align="center">
                <template scope="scope">
                    <span>{{ scope.row.baName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="负责人"
                    align="center">
                <template scope="scope">
                    <span>{{ scope.row.baScontacts }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="电话"
                    align="center">
                <template scope="scope">
                    <span>{{ scope.row.baPhone  }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="仓库类型"
                    align="center">
                    <template scope="scope">
                        <el-tag
                                close-transition>{{auto_baCtype(scope.row.baCtype)}}
                        </el-tag>
                    </template>
            </el-table-column>
            <el-table-column
                    v-if="multiSelect"
                    type="selection"
                    width="60">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20, 100, 500, 1000, 5000, 10000]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="currentTotal">
            </el-pagination>
        </div>
    </el-row>
    <el-dialog
            v-model="dialogFormVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">{{form.title}}</span>
            <el-steps
                    class="steps"
                    :space="120"
                    :active="dialogFormActive"
                    finish-baStatus="success">
                <el-step title="基础信息"></el-step>
                <el-step title="配置仓库"></el-step>
            </el-steps>
        </div>
        <el-form :model="form" ref="newForm">
            <el-row>
                <el-col :span="10">
                    <el-form-item
                            label="仓库名称"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.baName        "
                                auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                            label="所在地市号"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.baScity            "
                                auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                            label="相对湿度"
                            :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.baHumidity  "
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOption">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item
                            label="传真"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.baFax           "
                                auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                            label="邮编"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.baPostoffice                  "
                                auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                            label="仓库类型"
                            :label-width="formLabelWidth">
                        <!--<el-radio class="radio" v-model="form.baCtype " :label="true">男</el-radio>-->
                        <!--<el-radio class="radio" v-model="form.baCtype " :label="false">女</el-radio>-->
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2">
                    <el-form-item
                            label="状态"
                            :label-width="formLabelWidth">
                        <el-select v-model="a" placeholder="请选择">
                            <el-option :value="0">普通</el-option>
                            <el-option :value="1">堆高车</el-option>
                            <el-option :value="2">高位叉车</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                            label="维护ti值"
                            :label-width="formLabelWidth">

                        <el-radio class="radio" v-model="form.baIsti " :label="true">是</el-radio>
                        <el-radio class="radio" v-model="form.baIsti " :label="false">否</el-radio>
                    </el-form-item>
                    <el-form-item
                            label="备注"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.Remarks              "
                                auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                            label="电话号"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.baPhone         "
                                auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                            label="邮箱"
                            :label-width="formLabelWidth">
                        <el-input
                                v-model.number="form.baAcreage            "
                                auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="warehouseManage" v-show="dialogFormActive < 1">配置仓库</el-button>

            <el-button type="primary" @click="warehouseManage(true)" :loading="submitLoading"
                       v-show="dialogFormActive >= 1">仓库预览
            </el-button>

            <el-button type="primary" @click="submit" :loading="submitLoading"
                       v-show="dialogFormActive >= 1">保存
            </el-button>
        </div>
    </el-dialog>
    <el-dialog
            size="full"
            custom-class="warehouseDialog"
            v-model="dialogWarehouseVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">配置仓库</span>
        </div>

        <plan :observer="warehouseForm.observer"
              :new_role="true"
              :warehouse_id="warehouseForm.warehouse_id"></plan>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitWarehouse" :loading="loadingWarehouse">保存
            </el-button>
        </div>
    </el-dialog>
</div>
<style>
    .clearfix:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

    /*IE/7/6*/
    .clearfix {
        *zoom: 1;
    }

    #plan ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #plan li, #plan .sign .sign__block {
        float: left;
        width: 50px;
        height: 50px;
        margin: 3px;
        border: 1px solid #bbb;
        color: #fff;
        font-size: 12px;
        line-height: 50px;
        text-align: center;
        position: relative;
        border-radius: 10px;
    }

    #plan .btn {
        cursor: pointer;
        background: #e4e4e4;
        display: inline-block;
        border: 1px solid #999999;
        border-radius: 2px;
        width: 120px;
        height: 30px;
        color: #fff;
    }

    #plan .aisle {
        background-color: #bbb;
        border-radius: 0;
        border: 1px solid #fff;
    }

    #plan .aisle:before {
        content: ' ';
        position: absolute;
        width: 58px;
        height: 58px;
        left: -3px;
        top: -4px;
        background-color: #ccc;
        z-index: 3;
    }

    #plan .undefined {
        background-color: #ccc;
    }

    #plan .storageArea {
        background-color: #7ED321;
    }

    #plan .sortingArea {
        background-color: #47D0B2;
    }

    #plan .temporaryStorageArea {
        background-color: #F6A623;
    }

    #plan .unqualifiedArea {
        background-color: #FF5066;
    }

    #plan .selectedState {
        border: 2px solid #BD0FE1 !important;
        margin: 2px !important;
    }

    #plan .inner {
        margin: 0 20px;
    }

    #tag {
        width: 100%;
        overflow: scroll;
    }

    #plan .checkList {

    }

    #plan .btnGroup {

    }

    #plan p {
        margin: 0;
    }

    #plan .signGroup {
        height: 44px;
        margin-top: 16px;
        font-size: 16px;
        color: #333333;
    }

    #plan .sign {
        margin-right: 10px;
        display: inline-block;
        float: left;
    }

    #plan .sign .sign__block {
        width: 20px;
        height: 20px;
        border-radius: 2px;
    }

    #plan .sign .sign__block:before {
        display: none;
    }

    #plan .sign .sign__label {
        float: left;
        margin-top: 3px;
        margin-left: 4px;
    }

    #plan .HouseStructureGroup {

    }

    #plan .HouseStructureGroup .HouseStructure {
        float: left;
        width: 48%;
    }

    #plan .HouseStructureGroup .HouseStructure .el-textarea__inner {
        height: 60px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
    }

    #plan .HouseStructureGroup .HouseStructure__label {
        float: left;
        display: block;
        width: 47%;
        height: 58px;
        margin-left: 2%;
        background: #FCEFB3;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
        padding: 0 1%;
    }

    #plan .HouseStructureGroup {
        margin-top: 30px;
    }

    #plan .btnGroup .el-row {
        margin: 10px 0;
    }


</style>
<script>
    var warehouseConfiguration = new Vue({
        el: '#warehouseConfiguration',
        prop: {},
        data: function () {
            return {
                warehouseConfiguration: [],         //主页面 信息集合
                multipleSelection: [],              //主页面 多选集合
                multiSelect: false,                 //主页面 多选状态 维护
                baName: '',                  //主页面 仓库名称    搜索
                baScontacts: '',                 //主页面 仓库负责人  搜索
                baCtype: '',                 //主页面 仓库平面仓  搜索


                showLoading: false,              //主页面 加载 维护
                currentPage: 1,                  //分页 当前页
                currentTotal: 1,                 //分页 总页数
                pageSize: 10,                    //分页 分页大小

                formLabelWidth: '120px',            //表单 配置

                form: form(),                       //新建 弹出层 信息集合
                dialogFormActive: 0,                //新建 弹出层 steps 当前进度
                dialogFormVisible: false,           //新建 弹出层 是否可见
                submitLoading: false,               //新建 弹出层 提交等待

                pickerOption: {
                    disabledDate: function (time) {
                        return time.getTime() > Date.now();
                    }
                },                //新建 弹出层 相对湿度选项

                dialogWarehouseVisible: false,      //仓库配置 弹出层 是否可见
                loadingWarehouse: false,            //仓库配置 弹出层 提交等待
                warehouse: [],                      //仓库配置 集合
                warehouseForm: new_warehouseForm(), //仓库配置 弹出层 信息集合
            }
        },
        computed: {
            option: function () {
                return {
                    "draw": 1,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "baName": this.baName.trim(),
                    "baScontacts": this.baScontacts.trim(),
                    "baCtype": this.baCtype.trim()

                }
            },           //主页面 post 0
        },
        methods: {
            inlineEdit: function (index, row) {
                this.form.title = '编辑';
                this.form.ruUserId = row.ruUserId;
                this.form.baName = row.baName;
                this.form.baAddr = row.baAddr;
                this.form.baScity = row.baScity;
                this.form.baPhone = row.baPhone;
                this.form.baAcreage = row.baAcreage;
                this.form.baCtype = row.baCtype;
                this.form.baHumidity = row.baHumidity;
                this.form.baFax = row.baFax;
                this.form.baPostoffice = row.baPostoffice;
                switch (row.baStatus) {
                    case '普通':
                        this.form.baStatus = 0;
                        break;
                    case '堆高车':
                        this.form.baStatus = 1;
                        break;
                    case '高位叉车':
                        this.form.baStatus = 2;
                        break;
                }
                this.form.baClientId = row.baClientId;
                this.form.baIsti = row.baIsti;
                this.form.Remarks = row.Remarks;
                this.form.rubaStatus = parseInt(row.rubaStatus);
                this.dialogFormVisible = true;
                this.dialogFormActive = 0;
                Vue.nextTick(function () {
                    warehouseConfiguration.$refs.carousel.setActiveItem(0);
                });
            },                                  //行内按钮-编辑
            multiSelectClick: function () {
                this.multiSelect = !this.multiSelect;
            },                                      //多选 状态维护
            multiSelectionChange: function (val, row) {
                this.multipleSelection = val;
            },                          //多选 选中控制
            multiOperationEdit: function () {
                this.inlineEdit(1, this.multipleSelection[0]);
            },                                    //多选 编辑
            handleSizeChange: function (val) {
                /*<debug>*/
                console.log('每页' + val + '条');
                /*</debug>*/
                this.pageSize = val;
                p[0].post( this.option);
            },                                   //分页 Size
            handleCurrentChange: function (val) {
                /*<debug>*/
                console.log('当前第' + val + '页');
                /*</debug>*/
                this.currentPage = val;
                p[0].post( this.option);
            },                                //分页 当前页
            newInput: function () {
                this.form = form();
                this.dialogFormVisible = true;
                this.dialogFormActive = 0;
                Vue.nextTick(function () {
                    warehouseConfiguration.$refs.carousel.setActiveItem(0);
                });
            },                                              //按钮 新建入库单
            submitWarehouse: function () {
                var _this = this;
                this.loadingWarehouse = true;

                /*<prod>*/
                //TODO
                postModify(this, this.form);
                /*</prod>*/
                /*<debug>*/
                setTimeout(function () {
                    _this.loadingWarehouse = false;
                    _this.dialogWarehouseVisible = false;
                    _this.$notify({
                        title: '成功',
                        message: '仓库配置成功！',
                        type: 'success'
                    });
                }, 1500);
                /*</debug>*/
            },                                       //新建 仓库提交
            warehouseManage: function (observer, warehouseId) {
                this.dialogWarehouseVisible = !this.dialogWarehouseVisible;
            },                  //按钮 仓库配置 TODO
            prev: function () {
                this.dialogFormActive--;
                this.$refs.carousel.prev();
            },                                                  //新建 弹出层banner控制 前一个
            next: function () {
                this.dialogFormActive++;
                this.$refs.carousel.next();
            },                                                  //新建 弹出层banner控制 后一个
            submit: function () {
                var _this = this;
                this.dialogFormActive++;
                this.submitLoading = true;
                //TODO 此处应是ajax请求


                /*<prod>*/
                if (this.form.title === '新建仓库') {
                    postSubmit(this, this.form);
                } else {
                    postModify(this, this.form);
                }
                /*</prod>*/
                /*<debug>*/
                setTimeout(function () {
                    _this.submitLoading = false;
                    _this.$notify({
                        title: '成功',
                        message: '保存成功！',
                        type: 'success'
                    });
                    _this.dialogFormVisible = false;
                    _this.dialogFormActive = 0;
                    _this.$refs.carousel.setActiveItem(0);
                    p[0].post();
                }, 1500);
                /*</debug>*/
            },                                                //新建 表单提交
            auto_baCtype:function(value){
                var temp={}
                if(!isNaN(value)){
                    temp={
                        1:'立体仓',
                        2:'平面仓',
                    }
                }else{
                    temp={
                        '立体仓':1,
                        '平面仓':2
                    }
                }
                return temp[value];
            },                                         //仓库类型


        },
        watch: {
            baName: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post( this.option);
            },
            baScontacts: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post( this.option);
            },
            baCtype: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post( this.option);
            }
        }
    });
    function form() {
        return {
            baArehouseId: 1,           //仓库id
            title: "新建仓库",
            baName: '',                //仓库名称
            baAddr: '',               //仓库地址
            baScontacts: '',          //联系人/负责人
            baPhone: '',             //电话
            Remarks: '',               //备注
            baCtype: '',              //仓库类型
            baHumidity: '',          //相对湿度
            baPostoffice: '',         //邮编
            baFax: '',                //传真
        }
    }               //弹出层 form 模板
    var obj=warehouseConfiguration;
    var p=[];
    // 0 仓库配置 分页查询
    p[0] = autoPost({
        urlHock: "../../hock/warehouseConfiguration/warehouseConfiguration.json",
        urlProd: "/route/warehouseConfiguration/0",
        success: function (json) {
            obj.warehouseConfiguration = json.data;
            obj.currentTotal = json.recordsFiltered;
        }
    });
  // 1 仓库配置 编辑
    p[1] = autoPost({
        urlHock: "../../hock/warehouseConfiguration/warehouseConfiguration.json",
        urlProd: "/route/warehouseConfiguration/1",
        success: function (json) {
            obj.warehouseConfiguration = json.data;
            obj.currentTotal = json.recordsFiltered;
        }
    });
    // 2 仓库配置 新增
    p[2] = autoPost({
        urlHock: "../../hock/warehouseConfiguration/warehouseConfiguration.json",
        urlProd: "/route/warehouseConfiguration/2",
        success: function (json) {
            obj.warehouseConfiguration = json.data;
            obj.currentTotal = json.recordsFiltered;
        }
    });
    // 3 仓库配置
    p[3] = autoPost({
        urlHock: "",
        urlProd: "/route/warehouseConfiguration/3",
        success: function (json) {

        }
    });
    // 4 仓库配置
    p[4] = autoPost({
        urlHock: "",
        urlProd: "/route/warehouseConfiguration/4",
        success: function (json) {
        }
    });
    // 5 仓库配置
    p[5] = autoPost({
        urlHock: "",
        urlProd: "/route/warehouseConfiguration/5",
        success: function (json) {

        }
    });
    // 6 仓库配置
    p[6] = autoPost({
        urlHock: "",
        urlProd: "/route/warehouseConfiguration/6",
        success: function (json) {
        }
    });
    // 7 仓库配置
    p[7] = autoPost({
        urlHock: "",
        urlProd: "/route/warehouseConfiguration/7",
        success: function (json) {
        }
    });
    // 8 仓库配置
    p[8] = autoPost({
        urlHock: "",
        urlProd: "/route/warehouseConfiguration/8",
        success: function (json) {

        }
    });
     // 9 仓库配置 删除
    p[9] = autoPost({
        urlHock: "../../hock/warehouseConfiguration/warehouseConfiguration.json",
        urlProd: "/route/warehouseConfiguration/9",
        success: function (json) {
            obj.warehouseConfiguration = json.data;
            obj.currentTotal = json.recordsFiltered;
        }
    });
    Vue.component('plan-block', {
        render: function (h) {
            // create kebabCase id
            var e = this.element;
            var click = this.clc;
            var dClick = this.dclc;

            return h('li', {
                "class": {
                    selectedState: e.select,
                    aisle: e.statusColor[0],
                    undefined: e.statusColor[1],
                    storageArea: e.statusColor[2],
                    sortingArea: e.statusColor[3],
                    temporaryStorageArea: e.statusColor[4],
                    unqualifiedArea: e.statusColor[5]
                },
                style: {
                    color: this.kuQuColor(e.id[0])
                },
                attrs: {
                    row: e.row,
                    col: e.col,
                    status: e.status
                },
                on: {
                    click: function () {
                        if (e.id == -1)return;
                        click(e.click());
                    },
                    dblclick: function () {
                        if (e.id == -1)return;
                        dClick(e.click());
                    }
                }
            }, e.id)
        },
        props: {
            element: {
                type: Object,
                required: true
            },
            clc: '',
            dclc: ''
        },
        methods: {
            kuQuColor: function (kuQu) {
                // 适配颜色 在 http://www.bootcss.com/p/websafecolors/ 中挑选26种颜色，最好这些颜色还得兼容咱们的五种区域色 imzhangxing
                // 待测试
                switch (kuQu) {
                    case 'A':
                        return '#000099';
                    case 'B':
                        return '#FFFFCC';
                    case 'C':
                        return '#990033';
                    case 'D':
                        return '#660066';
                    case 'E':
                        return '#666600';
                    case 'F':
                        return '#003300';
                    case 'G':
                        return '#006666';
                    case 'H':
                        return '#990066';
                    case 'I':
                        return '#00CCFF';
                    case 'J':
                        return '#3300FF';
                    case 'K':
                        return '#990066';
                    case 'L':
                        return '#330033';
                    case 'M':
                        return '#000033';
                    case 'N':
                        return '#000000';
                    case 'O':
                        return '#003333';
                    case 'P':
                        return '#00FF66';
                    case 'Q':
                        return '#330000';
                    case 'R':
                        return '#333300';
                    case 'S':
                        return '#660000';
                    case 'T':
                        return '#666633';
                    case 'U':
                        return '#990000';
                    case 'V':
                        return '#996666';
                    case 'W':
                        return '#999966';
                    case 'X':
                        return '#CC0000';
                    case 'Y':
                        return '#FF9900';
                    case 'Z':
                        return '#FFFFFF';
                    default:
                        return '#000'
                }
            }
        }
    });
    Vue.component('plan', {
        props: {observer: null, warehouse_id: null, new_role: null},
        template: '\
    <div id="plan">\
        <div class="inner">\
        <div class="HouseStructureGroup clearfix" v-show="HouseStructure" v-if="!observer">\
        <el-input type="textarea" v-model="desc" class="HouseStructure"></el-input>\
        <div class="HouseStructure__label">\
        <p>库区代码结构, 可点击右侧图标显示！</p>\
    </div>\
    </div>\
    <div class="signGroup" v-if="!observer">\
        <div class="sign"><span class="sign__block undefined"></span><span class="sign__label">未定义</span></div>\
        <div class="sign"><span class="sign__block storageArea"></span><span class="sign__label">存储区</span></div>\
        <div class="sign"><span class="sign__block sortingArea"></span><span class="sign__label">分拣区</span></div>\
        <div class="sign"><span class="sign__block temporaryStorageArea"></span><span class="sign__label">暂存区</span>\
        </div>\
        <div class="sign"><span class="sign__block unqualifiedArea"></span><span class="sign__label">不合格区</span>\
        </div>\
        <div class="sign"><span class="sign__block selectedState"></span><span class="sign__label">选中状态</span></div>\
        <div class="sign"><span class="sign__block aisle"></span><span class="sign__label">过道</span></div>                     \
        </div>\
        <div id="tag" style="max-height:350px;">\
        <ul v-for="a of list" :style="{width:listWidth}" class="clearfix">\
        <plan-block\
    v-for="a1 of a"\
        :clc="eClick"\
    :dclc="eDoubleClick"\
    :element="a1">\
        </plan-block>\
        </ul>\
        </div>\
        <p v-if="!observer">快速选择库区</p>\
        <el-checkbox-group v-model="checkList" @change="checkListChange" class="checkList">\
        <el-checkbox :label="big.id" v-for="big of bigKuQu"></el-checkbox>\
        </el-checkbox-group>\
        <div class="btnGroup" v-if="!observer">\
        <el-row>\
        <el-col :span="4">\
        <button class="btn storageArea" @click="set(2)">设为存储区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn temporaryStorageArea" @click="set(4)">设为暂存区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn undefined" @click="set(1)">设为未设定区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn " @click="">查看所有库区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn resetSelect" @click="resetSelect">重置选择</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn resetHouse" v-if="!new_role" @click="resetHouse">调整仓库结构</button>\
        </el-col>\
        </el-row>\
        <el-row>\
        <el-col :span="4">\
        <button class="btn sortingArea" @click="set(3)">设为分拣区</button>\
        </el-col>\
        <el-col :span="4">\
        <button class="btn unqualifiedArea" @click="set(5)">设为不合格区</button>\
        </el-col>\
        <el-col :span="4" :offset="8">\
        <button class="btn unqualifiedArea" v-if="!new_role" @click="">保存修改</button>\
        </el-col>\
        </el-row>\
        </div>\
        <el-dialog\
    :title="form.title"\
    :modal="false"\
    @open="dialogOpen"\
    v-model="dialogTableVisible">\
        <el-table :data="form.tableData">\
        <el-table-column property="row" label="row" width="150"></el-table-column>\
        <el-table-column property="col" label="col" width="200"></el-table-column>\
        <el-table-column property="status" label="status"></el-table-column>\
        </el-table>\
        <div id="dialogECharts" style="width: 600px;height:400px;"></div>\
        </el-dialog>\
        </div>\
        </div>\
    ',
        data: function () {
            return {
                isdb: false,
                desc: '',                        // TODO 平面图 总数据信息 (未解析)
                kuQu: [[]],                      // 库区
                bigKuQu: {},                     // 库区组

                oldKuQu: [],                     // 旧的库区备份
                form: this.new_form(),           // 弹出层 基础数据
                dialogTableVisible: false,       // 弹出层 维护
                dialogECharts: {
                    title: {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },            // 弹出层 图表

                checkList: [],                   // 快捷多选 维护
                selected: [],                    // 被选中的库区
                HouseStructure: false            // 库区结构
            };
        },
        computed: {
            list: function () {
                var obj = [[]];
                var kuQu = {};
                var row = 0;
                var rRow = 0;
                var col = 1;
                var step = {};

                var ifAisle = false;

                for (var i = 0; i < this.desc.length; i++) {
                    switch (this.desc[i]) {
                        case ' ':       //过道
                            obj[rRow].push({id: -1, status: 0, statusColor: [true, false, false, false, false, false]});
                            break;
                        case '\n':      //换行
                            rRow++;
                            if (!ifAisle) {

                            } else {
                                row++;
                                ifAisle = false;
                            }
                            col = 1;
                            obj.push([]);
                            break;
                        default:        //仓库
                            ifAisle = true;
                            if (typeof kuQu[this.desc[i]] == 'undefined') {
                                kuQu[this.desc[i]] = {color: '', src: [], id: this.desc[i].toUpperCase()};
                            }
                            step = {
                                row: row,
                                col: col++,
                                statusColor: [false, true, false, false, false, false],
                                status: 1,
//                                id: kuQu[this.desc[i]].id + kuQu[this.desc[i]].src.length,
                                id: kuQu[this.desc[i]].id + (row + 1) + '-' + (col - 1),
//                                id: (row+1) + '-' + (col-1) + '-' + kuQu[this.desc[i]].id
                                click: function () {
                                    return this;
                                },
                                select: false
                            };
                            kuQu[this.desc[i]].src.push(step);                  //库区
                            obj[rRow].push(step);
                    }
                }
                this.bigKuQu = kuQu;
                this.kuQu = obj;

                return obj;
            },           // list所有的储存区域
            listWidth: function () {
                var maxNumber = this.kuQu[0].length;
                for (var i = 1; i < this.kuQu.length; i++) {
                    if (this.kuQu[i].length > maxNumber)
                        maxNumber = this.kuQu[i].length;
                }
                return maxNumber * 58 + 'px';
            }       // 维护最大平面图宽度
        },
        methods: {
            isAisle: function (id) {
                if (id == -1) {

                } else {

                }
            },
            dialogOpen: function () {
                var obj = this;
                Vue.nextTick(function () {
                    var myChart = echarts.init(document.getElementById('dialogECharts'));
                    myChart.setOption(obj.$data.dialogECharts);
                });
            },
            checkListChange: function () {
                this.resetSelectC(this.kuQu);
                this.selected = [];
                for (var b = 0; b < this.checkList.length; b++) {
                    var step = this.checkList[b].toLowerCase();
                    for (var i = 0; i < this.bigKuQu[step].src.length; i++) {
                        this.bigKuQu[step].src[i].select = true;
                        this.selected.push(this.bigKuQu[step].src[i]);
                    }
                }
            },
            selectedKuQu: function (e) {
                e.select = !e.select;
                if (e.select) {
                    this.selected.push(e);
                } else {
                    (function (obj, data) {
                        for (var i = 0; i < data.length; i++) {
                            var temp = data[i];
                            if (!isNaN(obj)) {
                                temp = i;
                            }
                            if (temp == obj) {
                                for (var j = i; j < data.length; j++) {
                                    data[j] = data[j + 1];
                                }
                                data.pop();
                            }
                        }
                    })(e, this.selected);
                }
            },
            resetSelect: function () {
                this.resetSelectC(this.kuQu);
                this.checkList = [];
                this.selected = [];
            },
            set: function (number) {
                //TODO 此处应有检查
                for (var i = 0; i < this.selected.length; i++) {
                    this.selected[i].statusColor[this.selected[i].status] = false;
                    this.selected[i].statusColor[number] = true;
                    this.selected[i].status = number;
                }
                //TODO 此处有应有post请求
                this.resetSelect();
            },
            deleteArea: function () {

            },

            eClick: function (e) {
                var obj = this;
                obj.isdb = false;
                window.setTimeout(function () {
                    if (obj.isdb != false)return;
                    obj.selectedKuQu(e);
                }, 300);
            },      // 单击库区 选中
            eDoubleClick: function (e) {
                //TODO 模拟弹出层 完整版
                this.isdb = true;
                var obj = this;
//                    console.log(e);
                if (this.selected.length < 2) {
                    obj.$data.form.tableData = [e];
                    obj.$data.form.title = e.id;
                } else {
                    obj.$data.form.tableData = this.selected;
                    obj.$data.form.title = '选中区域信息';
                }
                obj.$data.dialogTableVisible = true;
            },// 双击库区 查看详细信息

            resetHouse: function () {
                this.HouseStructure = !this.HouseStructure;
            },
            resetSelectC: function (kuQu) {
                for (var b = 0; b < kuQu.length; b++) {
                    for (var i = 0; i < kuQu[b].length; i++) {
                        kuQu[b][i].select = false;
                    }
                }
            },

            new_form: function () {
                return {
                    title: '查看\tA1-1',
                    tableData: this.new_tableData()
                }
            },

            new_tableData: function () {
                return {
                    row: 0,
                    col: 0,
                    status: 0
                }
            },
            init: function () {
                var obj = this;
                var complie = 0;                                //统计页面是否全部完成
                var end = 1;
                app.$data.fullscreenLoading = true;             //显示加载

                function Loading() {
                    complie++;
                    if (complie >= end) {
                        app.$data.fullscreenLoading = false; //结束加载
                    }
                }

                //------------------------- 加载 kuQu      -----------------------

                (function () {
                    /*<debug>*/
                    url = 'hock/warehouse/id.json';
                    /*</debug>*/

                    /*<prod>*/
                    // TODO 配置 kuQu 获取地址
                    url = 'hock/warehouse/id';
                    /*</prod>*/

                    $.ajax(url, {
                        type: "GET",
                        data: {},
                        error: function () {
                        },
                        success: function (json) {
                            obj.$data.desc = json.desc;
                            setTimeout(function () {
                                (function (json) {
                                    for (var i = 0; i < json.length; i++) {
                                        for (var b = 0; b < json[i].length; b++) {
                                            if (typeof obj.$data.kuQu[i][b] === 'undefined') continue;
                                            obj.$data.kuQu[i][b].row = json[i][b].row;
                                            obj.$data.kuQu[i][b].col = json[i][b].col;
                                            obj.$data.kuQu[i][b].statusColor = json[i][b].statusColor;
                                            obj.$data.kuQu[i][b].status = json[i][b].status;
                                            obj.$data.kuQu[i][b].select = json[i][b].select;
                                        }
                                    }
                                })(json.kuQu);
                                obj.$data.oldKuQu = json.kuQu;
                            }, 0);
                        },
                        complete: function () {
                            Loading();
                        }
                    });
                })();

                //------------------------- 是否启用 观察模式-----------------------
                if (this.observer) obj.$data.observer = true;
            }
        },
        mounted: function () {

            /*<debug>*/
            console.log(this.observer, this.warehouse_id);
            /*</debug>*/
            if (this.warehouse_id) this.init();
            if (this.new_role) this.resetHouse();
        },
        watch: {
            desc: function () {
                var obj = this;
                if (this.$data.oldKuQu.length != 0) {
                    setTimeout(function () {
                        (function (json) {
                            for (var i = 0; i < json.length; i++) {
                                for (var b = 0; b < json[i].length; b++) {
                                    if (typeof obj.$data.kuQu[i][b] === 'undefined') continue;
                                    obj.$data.kuQu[i][b].row = json[i][b].row;
                                    obj.$data.kuQu[i][b].col = json[i][b].col;
                                    obj.$data.kuQu[i][b].statusColor = json[i][b].statusColor;
                                    obj.$data.kuQu[i][b].status = json[i][b].status;
                                    obj.$data.kuQu[i][b].select = json[i][b].select;
                                }
                            }
                        })(obj.$data.oldKuQu);
                    }, 0);
                }
            }
        }
    });
    function new_warehouseForm() {
        return {
            observer: false,
            warehouse_id: 0
        }
    }
    // 高级 监视器的 使用方法
    //    warehouseConfiguration.$watch('date', function () {
    //        if (!this.option.dateStart)return;
    //        /*<debug>*/
    //        console.log(this.option);
    //        /*</debug>*/
    //        post(this, this.option);
    //    }, {deep: true});
    // post(warehouseConfiguration, warehouseConfiguration.option);
    p[0].post( warehouseConfiguration.option);
</script>

